<!-- input框输入值之后删除时输入框里面的值根据数据的长度来动态改变，如果原来的值已经不支持了，那么就要提醒重新进行输入 -->
<template>
  <div>
    <el-input
      size="medium"
      v-model="searchOperate"
      style="width: 500px; padding: 20px"
      @change="inputValue"
    />
    <el-button @click="handleClickSave" :disabled="isButtonDisabled"
      >保存</el-button
    >
    <vxe-table
      ref="xTable"
      :align="allAlign"
      :data="tableData"
      style="width: 800px"
    >
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="sex" title="Sex"></vxe-column>
      <vxe-column field="age" title="Age"></vxe-column>
      <vxe-column title="操作">
        <template slot-scope="scope">
          <el-button @click="handleClickDelete(scope.$index)">删除</el-button>
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import VXETable from "vxe-table";
export default {
  data() {
    return {
      searchOperate: "1+2+3+4",
      allAlign: null,
      tableData: [
        {
          id: 10001,
          name: "Test1",
          role: "Develop",
          sex: "Man",
          age: 28,
          address: "test abc",
        },
        {
          id: 10002,
          name: "Test2",
          role: "Test",
          sex: "Women",
          age: 22,
          address: "Guangzhou",
        },
        {
          id: 10003,
          name: "Test3",
          role: "PM",
          sex: "Man",
          age: 32,
          address: "Shanghai",
        },
        {
          id: 10004,
          name: "Test4",
          role: "Designer",
          sex: "Women",
          age: 24,
          address: "Shanghai",
        },
      ],
      isButtonDisabled: false, //默认不禁用按钮
    };
  },
  created() {
    // const tableList = localStorage.getItem("tableData");
    // console.log(tableList, "tableList");
    // this.tableData = tableList;
    //报错了
  },
  methods: {
    async handleClickDelete(index) {
      this.tableData.splice(index, 1);
      console.log("!213");
      this.inputValue();
    },
    inputValue() {
      if (this.searchOperate == null || this.searchOperate.trim() == "") {
        this.$message.warning("运算公式不可为空！");
        this.isButtonDisabled = true; // 输入为空时禁用保存按钮
      } else {
        this.isButtonDisabled = false; //合法时解除禁用
      }
      //验证公式合法性
      if (this.formulaJudge(this.searchOperate)) {
        let rowIndex = this.searchOperate.replace(/[^0-9]/gi, "");
        let points = rowIndex.split("");
        points.sort(function (a, b) {
          return b - a;
        });
        console.log(this.tableData, "data");
        // 删除之后this.tableData的值有变化之后在再删除的时候调用this.inputValue事件。
        if (points[0] > this.tableData.length) {
          this.$message.warning(
            "运算公式中的最大值超过条件个数，请检查后重试！"
          );
          this.isButtonDisabled = true; // 公式不合法时禁用保存按钮
        } else {
          this.isButtonDisabled = false; //合法时解除禁用
        }
      } else {
        this.$message.warning("运算公式不合法，请检查后重试！");
        this.isButtonDisabled = true; // 公式不合法时禁用保存按钮
      }
    },
    //验证公式合法性
    formulaJudge(string) {
      //去除左边及右边的括号（这个是我的公式里面有特殊字符）
      let str = string.replace("{", "").replace("}", "");
      // 剔除空白符
      string = str.replace(/\s/g, "");
      // 错误情况，空字符串
      if ("" === string) {
        return false;
      }
      // 检查数字是否重复出现
      if (/(\d).*\1/.test(string)) {
        return false;
      }
      // 包含非法字符（只允许数字、+、-、(、)，括号为英文括号）
      if (!/^[\d\+\-\(\)]+$/.test(string)) {
        return false;
      }
      // 错误情况，运算符连续
      if (/[\+\-\*\/]{2,}/.test(string)) {
        return false;
      }
      // 空括号
      if (/\(\)/.test(string)) {
        return false;
      }
      // 最后一个符号是加、减、乘、除符号
      if (/[\+\-\*\/]$/.test(string)) {
        return false;
      }
      // 错误情况，括号不配对
      let stack = [];
      for (let i = 0, item; i < string.length; i++) {
        item = string.charAt(i);
        if ("(" === item) {
          stack.push("(");
        } else if (")" === item) {
          if (stack.length > 0) {
            stack.pop();
          } else {
            return false;
          }
        }
      }
      if (0 !== stack.length) {
        return false;
      }
      // 错误情况，(后面是运算符
      if (/\([\+\-\*\/]/.test(string)) {
        return false;
      }
      // 错误情况，)前面是运算符
      if (/[\+\-\*\/]\)/.test(string)) {
        return false;
      }
      // 错误情况，(前面不是运算符
      if (/[^\+\-\*\/\(]\(/.test(string)) {
        return false;
      }
      // 错误情况，)后面不是运算符
      if (/\)[^\+\-\*\/\)]/.test(string)) {
        return false;
      }
      // **错误情况最后一个字符是**+-*/
      if (/\*[\+\-\*\/]$/.test(string)) {
        return false;
      }
      return true;
    },
    //
    handleClickSave() {
      if (this.searchOperate == null || this.searchOperate.trim() == "") {
        this.$message.warning("运算公式不可为空！");
        this.isButtonDisabled = true;
        return;
      } else if (this.formulaJudge(this.searchOperate)) {
        let rowIndex = this.searchOperate.replace(/[^0-9]/gi, "");
        let points = rowIndex.split("");
        points.sort(function (a, b) {
          return b - a;
        });
        if (points[0] > this.tableData.length) {
          this.$message.warning(
            "运算公式中的最大值超过条件个数，请检查后重试！"
          );
          this.isButtonDisabled = true; // 公式不合法时禁用保存按钮
          return;
        }
        this.isButtonEnabled = false;
      } else {
        this.$message.warning("运算公式不合法，请检查后重试！");
        this.isButtonDisabled = true; // 公式不合法时禁用保存按钮
        return;
      }
      console.log(this.tableData, "tableData");
      let tableData = JSON.stringify(this.tableData);
      localStorage.setItem("tableData", tableData);
    },
  },
};
</script>

<style scoped>
>>> .el-input--medium .el-input__inner {
  padding: 20px;
}
</style>